<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/template/mainLayout.xhtml" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">
	<ui:define name="content">
		<h:outputStylesheet name="prettyPhoto.css" library="css"/>
		<h:outputScript name="jquery.prettyPhoto.js" library="javascript" target="head"/>
		<div class="container">
			<h2>#{msg.home}</h2>
			<div class="subContainer eheight">
				<a href="#{resource['images:ap/area-servico.jpg']}" rel="ap[1]">
					<h:graphicImage name="ap/thumbs/area-servico.jpg" library="images" alt="Area de serviço" />
				</a>
				<a href="#{resource['images:ap/balcao.jpg']}" rel="ap[1]">
					<h:graphicImage name="ap/thumbs/balcao.jpg" library="images" alt="Balcão"/>
				</a>
				<a href="#{resource['images:ap/banh_DCE_1.jpg']}" rel="ap[1]">
					<h:graphicImage name="ap/thumbs/banh_DCE_1.jpg" library="images" alt="Banheiro DCE"/>
				</a>
				<a href="#{resource['images:ap/banh_DCE_2.jpg']}" rel="ap[1]">
					<h:graphicImage name="ap/thumbs/banh_DCE_2.jpg" library="images" alt="Banheiro DCE"/>
				</a>
				<a href="#{resource['images:ap/banh_DCE_3.jpg']}" rel="ap[1]">
					<h:graphicImage name="ap/thumbs/banh_DCE_3.jpg" library="images" alt="Banheiro DCE"/>
				</a>
				<a href="#{resource['images:ap/banh_social_1.jpg']}" rel="ap[1]">
					<h:graphicImage name="ap/thumbs/banh_social_1.jpg" library="images" alt="Banheiro Social"/>
				</a>
				<a href="#{resource['images:ap/banh_social_2.jpg']}" rel="ap[1]">
					<h:graphicImage name="ap/thumbs/banh_social_2.jpg" library="images" alt="Banheiro Social"/>
				</a>
				<a href="#{resource['images:ap/copa_1.jpg']}" rel="ap[1]">
					<h:graphicImage name="ap/thumbs/copa_1.jpg" library="images" alt="Copa"/>
				</a>
				<a href="#{resource['images:ap/cozinha_1.jpg']}" rel="ap[1]">
					<h:graphicImage name="ap/thumbs/cozinha_1.jpg" library="images" alt="Cozinha"/>
				</a>
				<a href="#{resource['images:ap/qto_1_1.jpg']}" rel="ap[1]">
					<h:graphicImage name="ap/thumbs/qto_1_1.jpg" library="images" alt="Quarto 1"/>
				</a>
				<a href="#{resource['images:ap/qto_1_2.jpg']}" rel="ap[1]">
					<h:graphicImage name="ap/thumbs/qto_1_2.jpg" library="images" alt="Quarto 1"/>
				</a>
				<a href="#{resource['images:ap/qto_2_1.jpg']}" rel="ap[1]">
					<h:graphicImage name="ap/thumbs/qto_2_1.jpg" library="images" alt="Quarto 2"/>
				</a>
				<a href="#{resource['images:ap/sala.jpg']}" rel="ap[1]">
					<h:graphicImage name="ap/thumbs/sala.jpg" library="images" alt="Quarto 2"/>
				</a>
				<a href="#{resource['images:ap/suite_DCE.jpg']}" rel="ap[1]">
					<h:graphicImage name="ap/thumbs/suite_DCE.jpg" library="images" alt="Quarto DCE"/>
				</a>
				<a href="#{resource['images:ap/varanda_1.jpg']}" rel="ap[1]">
					<h:graphicImage name="ap/thumbs/varanda_1.jpg" library="images" alt="Varanda"/>
				</a>
				<a href="#{resource['images:ap/varanda_2.jpg']}" rel="ap[1]">
					<h:graphicImage name="ap/thumbs/varanda_2.jpg" library="images" alt="Varanda"/>
				</a>
			</div>
		</div>
		
		<script type="text/javascript" charset="utf-8">
			$(document).ready(function(){
				$("a[rel^='ap']").prettyPhoto({theme:'dark_rounded', social_tools: ''});
				$("#welcome").addClass("active");
			});
		</script>
	</ui:define>
</ui:composition>
